<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<head>
		<meta charset="utf-8">
		<title>login</title>
		
		<link rel="stylesheet" href="/static/css/style.css">
		
	</head>
	<body>
		<div id="head">
		</div>
		
		<div id="login-box">
			{% if not username.strip() %}
              	<form class="form-signin" action="" method="post">
                	<h2 class="form-signin-heading">Please sign in</h2>
	                <input type="text" name="username" value="username">
	                <input type="password" name="password" value="password">
	                	<label>
	                		<input type="checkbox" class="checkbox" value="remember-me"> Remember me
	               	 	</label>
	                <input class="btn" type="submit" value="Sign in">
	                <input class="btn" type="reset" value="Reset">
              	</form>
             {% else %}
             	<div id="login-success">
             		已登录的用户为:{{username}}
             		<br/>
             		<a href="/record/index.html">立即进入到note页面</a>
             	</div>
             {% endif %}
             	
        </div>

		<div id="footer">
		</div>
		
		
		<script src="/static/js/jquery-1.4.4.min.js"></script>
		
		<script src="/static/js/jquery.event.move.js"></script>
		<script src="/static/js/jquery.event.swipe.js"></script>
			
		<script src="/static/js/unslider.min.js"></script>

		<script>
			if(window.chrome) {
				$('.banner li').css('background-size', '100% 100%');
			}
			
			$('.banner').unslider({
				fluid: true,
				dots: true,
				speed: 500
			});
		
			//  Find any element starting with a # in the URL
			//  And listen to any click events it fires
			$('a[href^="#"]').click(function() {
				//  Find the target element
				var target = $($(this).attr('href'));
				
				//  And get its position
				var pos = target.offset(); // fallback to scrolling to top || {left: 0, top: 0};
				
				//  jQuery will return false if there's no element
				//  and your code will throw errors if it tries to do .offset().left;
				if(pos) {
					//  Scroll the page
					$('html, body').animate({
						scrollTop: pos.top,
						scrollLeft: pos.left
					}, 1000);
				}
				
				//  Don't let them visit the url, we'll scroll you there
				return false;
			});
		
			var GoSquared = {acct: 'GSN-396664-U'};

			// send login request to server
			$('form').submit(function(){
				$.ajax({
					url: '/login.json',
					type: 'post',
					data:$(this).serialize(),
					timeout: 1000,
					error: function(){
						alert('Error loading PHP document');
					},
					success: function(result){
						if(result.success == 'true'){
							location.href = "/record/index.html";
						}else{
							alert("login failed!");
						}
					}

				})

				return false;
			});
			
		</script>
		
	</body>
</html>
